<template>
    <div class="newsInfo-container">
        <h5 class="news-title">{{ newsInfo.title }}</h5>
        <p class="news-subtitle">
            <span class="news-publishTime">发表时间：{{ newsInfo.add_time }}</span>
            <span class="news-click">点击{{ newsInfo.click}}次</span>
        </p>
        <hr>
        <div class="content" v-html="newsInfo.content"></div>
        <comment-box :newsId="this.newsId"></comment-box>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    import comment from '../subComponents/Comment'

    export default {
        name: "NewsInfo",
        data(){
            return{
                newsId: this.$route.params.id,
                newsInfo: {}
            }
        },
        created(){
            this.getNewsInfo()
        },
        components: {
          "comment-box": comment
        },
        methods:{
            getNewsInfo(){
                this.$http.get('api/getnew/' + this.newsId).then(result => {
                    if (result.body.status ===0 ){
                        this.newsInfo = result.body.message[0]
                    } else {
                        Toast('获取新闻失败！')
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.newsInfo-container{
    padding: 0 4px;
    .news-title{
        text-align: center;
        font-size: 16px;
        margin: 15px 0;
        color: black;
    }
    .news-subtitle{
        display: flex;
        justify-content: space-between;
        color: #007aff;
        font-size: 13px;
    }
}
</style>